<template>
  <div>
    <span>Fill color: </span>
    <select v-model="data">
      <option v-for="[v, label] of colors" :value="v">{{ label }}</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const colors: [string, string][] = [
  ["#ff000088", "semi-transparent red"],
  ["green", "green"],
  ["#00f8", "semi-transparent blue"],
  ["orange", "orange"],
  ["rgba(100,140,230,0.5)", "semi-transparent cornflowerblue"],
  ["goldenrod", "goldenrod"],
  ["navy", "navy"],
  ["purple", "purple"],
];
const props = defineProps<{
  value: string;
}>();
const emit = defineEmits<{
  "update:value": [v: string];
}>();
const data = computed({
  get: () => props.value,
  set: (v) => emit("update:value", v),
});
</script>

<style scoped></style>
